<!-- Imports Polymer -->
<link rel="import" href="../../../bower_components/polymer/polymer.html">

<!-- Imports Dependencies -->
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-styles/shadow.html">
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">

<!-- Defines element markup -->
<dom-module id="chemical-element">

  <template>

    <custom-style>
      <style>

        :host
        {
          display: block;
          width: 100%;
          height: 100%;
        }

        .element-card
        {
          display: flex;
          justify-content: center;
          align-items: center;

          font-size: 3vw;
          width: 100%;
          height: 100%;
          font-family: sans-serif;
          color: white;
          text-align: center;
          cursor: pointer;
        }

        .element-symbol
        {
          flex: 0 0;
        }

        .element-card:hover
        {
          @apply --shadow-elevation-4dp;
        }

        .alkali-metal           { background-color: var(--alkali-metal-background-color);           }
        .alkaline-earth-metal   { background-color: var(--alkaline-earth-metal-background-color);   }
        .transition-metal       { background-color: var(--transition-metal-background-color);       }
        .metalloid              { background-color: var(--metalloid-background-color);              }
        .post-transition-metal  { background-color: var(--post-transition-metal-background-color);  }
        .other-nonmetal         { background-color: var(--other-nonmetal-background-color);         }
        .lanthanide             { background-color: var(--lanthanide-background-color);             }
        .actinide               { background-color: var(--actinide-background-color);               }
        .halogen                { background-color: var(--halogen-background-color);                }
        .noble-gas              { background-color: var(--noble-gas-background-color);              }

        .alkali-metal.selected            { background-color: var(--alkali-metal-primary-color);           }
        .alkaline-earth-metal.selected    { background-color: var(--alkaline-earth-metal-primary-color);   }
        .transition-metal.selected        { background-color: var(--transition-metal-primary-color);       }
        .metalloid.selected               { background-color: var(--metalloid-primary-color);              }
        .post-transition-metal.selected   { background-color: var(--post-transition-metal-primary-color);  }
        .other-nonmetal.selected          { background-color: var(--other-nonmetal-primary-color);         }
        .lanthanide.selected              { background-color: var(--lanthanide-primary-color);             }
        .actinide.selected                { background-color: var(--actinide-primary-color);               }
        .halogen.selected                 { background-color: var(--halogen-primary-color);                }
        .noble-gas.selected               { background-color: var(--noble-gas-primary-color);              }

        .selected
        {
          @apply --shadow-elevation-6dp;
        }

        .selected:hover
        {
          @apply --shadow-elevation-6dp;
        }

      </style>
    </custom-style>

    <paper-card
      id="paper-card"
      class$="[[element.group]] element-card"
    >
      <div class="element-symbol">
        [[element.symbol]]
      </div>
    </paper-card>
  </template>

  <!-- Loads JavaScript -->
  <script src="chemical-element.js"></script>
</dom-module>
